<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性 vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及内块元素的垂直居中
					  【文本和图片垂直居中（对齐）效果】
					  对齐分为四种：基线对齐、顶部对齐
					               居中对齐、底部对齐
					  元素种类：块元素、行元素、行内块元素
					  块元素特点：独占一行、设置宽高
					  行元素特点：一行内显示、不可设置宽高
					  网页：元素之间嵌套生成
					  行元素与块元素可以任意嵌套
					  前提：设置宽高---行套块
					               ---块套块    √
								   ---块套行    √
					前提：一行内显示----行套块    √
					              -----块套块    ×
								   ----块套行    √
								   ----行套行   √
								   通常都是块套 行套的前提是在一行内显示
						 
		 
		 -->
		 <style>
			 i mg:nth-child(1){
				 /*vertical-align: baseline 默认基线对齐;*/
				 vertical-align: baseline;
			 }
			  i mg:nth-child(2){
				 /*vertical-align: baseline 顶部对齐;*/
				 vertical-align:top;
				  width: 500px;
				  height: 500px;
				  background: red;
			 }
			 img.baseline{
				 vertical-align: baseline;
			 }
			 img.top{
				 vertical-align: top;
				 
			 }
			 img.middle{
				 vertical-align: middle;
			 }
			 img.bottom{
				 vertical-align: bottom;
				 
			 }
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套 图片叫什么名字
		                    文字后加img,设定宽高：25~100px
							每个图片后面加：基线对齐、顶部对齐
							居中对齐、底部对齐
							-->
			<h1>文本与图片的垂直属性</h1>
			<p>园丁<img class="baseline" src="img/2 (2).png" alt="园丁"width="25px" hight="100px">基线对齐</p>
			<p>小说家<img class="top" src="img/2 (1).png" alt="小说家"width="25px" hight="100px">顶部对齐</p>
			<p>画家<img class="midden" src="img/3.png" alt="画家"width="25px" hight="100px">居中对齐</p>
			<p>医生<img class="bottom" src="img/4.png" alt="医生"width="25px" hight="100px">底部对齐</p>
			<!-- css选择器--抓第一张图片......
			 思路：派生选择器：找后代+伪类选择器：添加效果
			 错误原因：thml结构不符合派生特点：p包含4个img
			 p img:ntn-child(1)
			 -->
	</body>
</html>